<template>
	<view class="content">
		<view class="lunbo">
			<swiper indicator-dots="true" autoplay="true" interval="5000" circular="true" duration="1000">
				<swiper-item v-for="(val, index) in imgArr" :key="index">
					<navigator class="swiper-item" :url="'../news/newsDetail?newsId=' + val.newsId"><image :src="val.imgUrl"></image></navigator>
				</swiper-item>
			</swiper>
		</view>
		<view class="tongzhi">
			<view class="uni-swiper-msg">
				<view class="uni-swiper-msg-icon"><image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image></view>
				<swiper vertical="true" autoplay="true" circular="true" interval="3000">
					<swiper-item v-for="(item, index) in msgArr" :key="index">
						<navigator :url="'../tongzhi/tongzhixiangqing?xqId=' + item.noticeId" class="uni-ellipsis">{{ item.noticeTitle }}</navigator>
					</swiper-item>
				</swiper>
				<navigator class="more" url="../tongzhi/tongzhi">更多</navigator>
			</view>
		</view>
		<view class="uni-grid-9 uni-common-mt">
			<view
				class="uni-grid-9-item"
				hover-class="uni-grid-9-item-hover"
				v-for="(item, index) in grids"
				:key="index"
				:class="index % 3 === 2 ? 'no-border-right' : ''"
				@tap="goRepair(index)"
			>
				<image class="uni-grid-9-image" :src="item.src"></image>
				<text class="uni-grid-9-text">{{ item.tip }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			msgArr: [],
			src: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
			grids: [
				{ src: '../../static/img/bx.jpg', tip: '我要报修' },
				{ src: '../../static/img/tx.jpg', tip: '报修记录' },
				{ src: '../../static/img/xx.jpg', tip: '信息查询' },
				{ src: '../../static/img/bc.jpg', tip: '新闻动态' },
				{ src: '../../static/img/xy.jpg', tip: '校园地图' },
				{ src: '../../static/img/fw.jpg', tip: '通讯录' }
			],
			imgArr: ['../../static/img/20181023223414018104.jpg', '../../static/img/20181220153508973251.jpg', '../../static/img/20190104170243832377.png']
		};
	},
	computed: mapState(['URL', 'TOKEN', 'USER_INFO']),
	onLoad() {
		this.GET_USER_INFO();
		this.GET_TOKEN();
		this.getNotice();
		this.getAtlas();
		// console.log('this.TOKEN: ' + this.TOKEN);
		// console.log('this.USER_INFO: ' + this.USER_INFO);
	},
	methods: {
		...mapMutations(['LOGIN', 'GET_USER_INFO', 'GET_TOKEN','SHOW_LOGIN']),
		getNotice() {
			let data = {
				page: 1,
				rows: 5
			};
			uni.request({
				url: this.URL + 'notice/getNoticeList',
				data: data,
				success: res => {
					this.msgArr = res.data.data;
				}
			});
		},
		getAtlas(){
			uni.request({
				url: this.URL + 'img/getImgList',
				success: res => {
					console.log(JSON.stringify(res.data) );
					this.imgArr = res.data.data;
				}
			});
		},
		goRepair(e) {
			if (this.USER_INFO) {
				if (e === 0) {
					uni.navigateTo({
						url: '../baoxiu/baoxiu'
					});
				}else if (e === 1) {
					uni.navigateTo({
						url: '../baoxiuList/baoxiuList'
					});
				} else if (e === 3) {
					uni.navigateTo({
						url: '../news/news'
					});
				} else if (e === 4) {
					uni.navigateTo({
						url: '../map/map'
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '模块完善中'
					});
				}
			} else {
				this.SHOW_LOGIN();
			}
		}
	}
};
</script>

<style>
/* 轮播演示覆盖 */
.lunbo swiper {
	width: calc(750upx - 40upx);
	height: 450upx;
}
.lunbo swiper image {
	width: 100%;
	height: 450upx;
}
.tongzhi {
	margin-top: 20upx;
}
.more {
	padding-left: 20upx;
	width: 100upx;
}
.more:after {
	content: '';
	width: 2upx;
	height: 30upx;
	display: inline-block;
	background: #cfd0d2;
	position: relative;
	top: 5upx;
	left: -70upx;
}
/* 导航 */
.uni-grid-9 {
	margin-top: 0upx;
	background: white;
	width: calc(750upx - 40upx);
}
.uni-grid-9-item {
	width: 33.33%;
	box-sizing: border-box;
}
.uni-grid-9-text {
	line-height: 50upx;
}
</style>
